<head>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">  
</head>
{literal}
<style type="text/css">
body {
	font-family: Arial, '宋体';
	margin: 0 auto;
	padding: 0;
	background: url(./static/public/jcrop/images/bg.jpg) repeat;
	font-size: 12px;
	color: #000;
}

.container {
	width: 800px;
	margin: 0px auto;
}

.section {
	background-color: #fff;
	padding: 20px;
}

.row {
	width: 661px;
	overflow: hidden;
	margin-top: 20px;
	line-height: 30px;
	padding-left: 94px;
}

.row span.label {
	float: left;
	position: relative;
	line-height: 30px;
	margin-left: -94px;
	width: 84px;
	text-align: right;
	color: #5b5b5b;
}

.btn_submit {
	background: url(./static/public/jcrop/images/submit.gif) no-repeat;
	width: 70px;
	height: 29px;
	border: 0;
}
</style>
{/literal}


<div style="width: 400px; float: left;">
<div class="row"><label><span class="label">上传头像：</span></label> <img
	src="" id="target" width="360px;"/><div class="jianyi">建议尺寸为600x600 清晰大图</div></div>
<div class="row" style="float: left; width: 400px;"><label><span
	class="label">上传：</span></label> <input type="text" id="avatarUpload"
	value="" /> <input type="hidden" id="img" name="img" /> <input
	type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /> <input type="hidden" id="h"
	name="h" /></div>

</div>
<div style="width: 200px; float: left; margin-left: 20px;">
<div class="row imgchoose" style="float: left;">头像预览：<br />
<div
	style="width: 200px; height: 200px; overflow: hidden; float: left;"><img
	class="preview" id="preview3" src="" /></div>
</div>
<div class="row"><input type="button" class="btn_submit" value=""
	id="avatar_submit" style="display: none;" /></div>
</div>
</div>


<script src="./static/public/jcrop/jquery.js"></script>
<link href="./static/public/uploadify/uploadify.css" type="text/css"
	rel="stylesheet" />
<script type="text/javascript"
	src="./static/public/uploadify/jquery.uploadify-3.1.js"></script>
<script type="text/javascript"
	src="./static/public/jcrop/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="./static/public/jcrop/jquery.Jcrop.css"
	type="text/css" />
{literal}
<script type="text/javascript">
$(function() {
	//首页轮播图1
	$("#avatarUpload").uploadify({
		'auto'				: true,
		'multi'				: false,
		'uploadLimit'		: 10,
		'formData'			: {'uid':{/literal}{$user.uid}{literal}},
		'buttonText'		: '请选择头像',
		'height'			: 20,
		'width'				: 120,
		'removeCompleted'	: true,
		'swf'				: './static/public/uploadify/uploadify.swf',
		'uploader'			: './index.php?face/setface',
		'fileTypeExts'		: '*.gif; *.jpg; *.jpeg; *.png;',
		'fileSizeLimit'		: '1024KB',
		'onUploadSuccess' : function(file, data, response) {
			var msg = $.parseJSON(data);
			if( msg.message == "success" ){
		    
				$("#img").val( msg.data.result_des);
				$("#target").attr("src",msg.data.result_des+"?"+Math.random());
				$(".preview").attr("src",msg.data.result_des+"?"+Math.random());
				$('#target').Jcrop({
					minSize: [50,50],
					setSelect: [0,0,200,200],
					onChange: updatePreview,
					onSelect: updatePreview,
					onSelect: updateCoords,
					aspectRatio: 1
				},
				function(){
					// Use the API to get the real image size					
					var bounds = this.getBounds();
					boundx = bounds[0];
					boundy = bounds[1];
					// Store the API in the jcrop_api variable
					jcrop_api = this;
				});
				//jcrop_api.setImage(msg.data.result_des);
				$(".imgchoose").show();
				$("#avatar_submit").show();
			} else {
				alert('上传失败');
			}
		},
		'onClearQueue' : function(queueItemCount) {
            alert( $('#img1') );
        },
		'onCancel' : function(file) {
            alert('The file ' + file.name + ' was cancelled.');
        }
    });
    
    //头像裁剪
	var jcrop_api, boundx, boundy;
	
	function updateCoords(c)
	{
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	function checkCoords()
	{
		if (parseInt($('#w').val())) return true;
		alert('请选择图片上合适的区域');
		return false;
	};
	function updatePreview(c){
	
		
		{
			var rx = 200 / c.w;
			var ry = 200 / c.h;
			$('#preview3').css({
				width: Math.round(rx * boundx) + 'px',
				height: Math.round(ry * boundy) + 'px',
				marginLeft: '-' + Math.round(rx * c.x) + 'px',
				marginTop: '-' + Math.round(ry * c.y) + 'px'
			});
		}
	};
	
	$("#avatar_submit").click(function(){
		var img = $("#img").val();
		var x = $("#x").val();
		var y = $("#y").val();
		var w = $("#w").val();
		var h = $("#h").val();
		if( checkCoords() ){
			$.ajax({
				type: "POST",
				url: "./index.php?face/resize",
				data: {"img":img,"x":x,"y":y,"w":w,"h":h},
				dataType: "json",
				success: function(msg){
					if( msg.message == "success" ){
                        jcrop_api.release();
                        jcrop_api.disable();
                        window.opener=null;
                        window.open('','_self');
                        window.close();
						
					} else {
						alert("失败");
					}
				}
			});
		}
	});
});
</script>
{/literal}
</body>
</html>